<template>
  <div class="zixun">
    <van-nav-bar
        title="资讯"
        class="navBar"/>
    <div class="container">
      <!-- 大咖新动态 -->
      <h4 >大咖新动态</h4>
      <div class="star">
        <ul>
          <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
          <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
          <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
           <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
       <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
           <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
           <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        <span class="dot"></span>
        </li>
           <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
           <li>
        <img></img>
        <p class="name">张韶涵</p>
        <p class="action">去看最近动态aaaaaaaaaaaaaaaaaaa</p>
        <span class="dot"></span>
        </li>
        </ul>
      </div>
  
    <!-- 为你推荐 -->
    <div class="content">
      <h4 >为你推荐</h4>
      <!-- 左侧滑块 -->
      <div class="leftAndright">
      <div class="left">
        <ul class="leftContent">
            <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>
             <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>
             <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>
        </ul>
      </div>
      <!-- 右侧滑块 -->
      <div class="right">
        <div class="nav">
          <img src="../../../static/img/popular venues.png"></img>
        </div>
        <!-- 推荐 -->
        <ul>
           <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>
            <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>
            <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>
            <li>
                <img></img>
                <div class="info">
                   <p class="name">【11月场次早鸟抢购】浸入式戏剧《不眠之夜Sleep No More》</p>
              <p class="time">2021.11.4 - 2021.11.28</p>
              <span class="price"><i>￥80</i> 起</span>
                </div>
            </li>

        </ul>
      </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "Zixun",
};
</script>

<style lang="less" scoped>
.zixun {
  background-color: pink;
  .container {
    padding: 0 5px;
    background: #fff;
    height: auto;
    // 大咖新动态
    h4 {
      padding: 20px 0 0;
      color: #333;
    }
    // 动态
    .star {
      // margin-left: 10px;
      overflow: scroll;

      ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style: none;
        li {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 70px;
          margin-right: 10px;
          text-align: center;
          img {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-color: gray;
          }
          .name {
            font-size: 12px;
            color: #333;
            margin: 5px 0 2px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
          }
          .action {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            color: #999;
            font-size: 11px;
          }
          .dot {
            width: 5px;
            height: 5px;
            border-radius: 100%;
            position: absolute;
            left: 70px;
            top: 85px;
            background: red;
          }
        }
      }
    }
    // 滚动条样式影藏
    .star::-webkit-scrollbar {
      display: none;
    }
    // 为你推荐
    .content {
      h4 {
        padding: 0;
        color: #333;
      }
      .leftAndright {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // background-color: rgb(19, 0, 128);
        // 左侧展示
        .left {
          width: 48%;
          // background: yellow;

          .leftContent {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            // flex-start:
            li {
              height: 280px;
              border: 1px solid #f0f0f0;
              display: flex;
              flex-direction: column;
              border-radius: 5%;
              // background-color: hotpink;
              margin-bottom: 5px;
              img {
                width: 100%;
                height: 70%;
                background-color: grey;
              }
              .info {
                padding: 0 8px;
                .name {
                  margin-top: 5px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: 700;
                  font-size: 14px;
                  color: #333;
                  // line-height: 20px;
                  max-height: 40px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                }
                .time {
                  margin-top: 5px;
                  color: #999;
                  font-size: 12px;
                  margin-top: 5px;
                }
                .price {
                  margin: 5px 0;
                  color: red;
                  font-size: 12px;
                  i {
                    margin-top: 5px;
                    font-size: 16px;
                    font-weight: 700;
                    font-style: normal;
                  }
                }
              }
            }
          }
        }
        .right {
          width: 48%;
          // background-color: red;
          img {
            width: 100%;
            height: 200px;
          }
          ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            li {
              height: 280px;
              border: 1px solid #f0f0f0;
              display: flex;
              flex-direction: column;
              border-radius: 5%;
              // background-color: hotpink;
              margin-bottom: 5px;
              img {
                width: 100%;
                height: 70%;
                background-color: grey;
              }
              .info {
                padding: 0 8px;
                .name {
                  margin-top: 5px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: 700;
                  font-size: 14px;
                  color: #333;
                  // line-height: 20px;
                  max-height: 40px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                }
                .time {
                  margin-top: 5px;
                  color: #999;
                  font-size: 12px;
                  margin-top: 5px;
                }
                .price {
                  margin: 5px 0;
                  color: red;
                  font-size: 12px;
                  i {
                    margin-top: 5px;
                    font-size: 16px;
                    font-weight: 700;
                    font-style: normal;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>